<script>
        $(document).ready(function(){
            $('.btnUpdateStatus').on('click', function(){
              var _this = $(this).val();              
              
              var status1 = $("#select"+_this+" option:selected").val();  

              var status1_text = '';             

              $.post("<?=site_url('order/updateCart') ?>",
              {
                  order:_this,
                  status:status1,
              },
              function(data,status){                        
                 alert("Order status: "+ status1 +" ! Order Id: #" + _this);  
                 if(status1 == 'completed')
                 {
                    status1_text = '<button type="button" class="btn btn-success">completed</button>';
                 }
                 $("#statusDiv"+_this).html(status1_text);
              });                          
              return true;  
            });

            /// edit ajax on click
            $(".btn-info").on('click', function(){
                var order_id = this.id;

                // show input field customerajax, phoneajax, addajax, qtyajax
                $("#customerajax_"+order_id).toggle();

                $('#phoneajax_'+order_id).toggle();

                $('#addajax_'+order_id).toggle();

                // show update cart ajax button
                $('#updateajax_'+order_id).toggle();

                // hide edit button
                $('#'+order_id).hide();                

                return false;
            });

            // edit ajax button click 
            $(".btn-link").on('click', function(){
                var order_id = $(this).attr('id').split('_')[1];

                // show edit button
                $('#'+order_id).show();

                var customer = $("#customerajax_"+order_id).val();
                var phone =  $('#phoneajax_'+order_id).val();
                var address = $('#addajax_'+order_id).val();                              

                // hide all ajax fields
                $("#customerajax_"+order_id).hide();

                $('#phoneajax_'+order_id).hide();

                $('#addajax_'+order_id).hide();
                
                // hide update cart ajax button
                $('#updateajax_'+order_id).hide();

                $.post("<?=site_url('order/updateOrder') ?>",
                {
                    order_id: order_id,
                    customer_name: customer,
                    customer_phone: phone,                   
                    shipping_address : address,  
                    ajax:"success",
                },
                function(data,status){
                  if(status == 'success')
                  {
                    $('#customer_updated_'+order_id).html(customer);
                    $('#phone_updated_'+order_id).html(phone);
                    $('#address_updated_'+order_id).html(address);
                  }

                  return false;
                });                  
            });
        })        
    </script>
<form class="form-horizontal" role="form" method="post" action="<?=site_url('order/index') ?>"> 
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Tình trạng đơn hàng</label>    
    <div class="col-sm-3">
      <select class="form-control" name="status">
        <option value="">--Tất cả--</option>
        <option value="pending" <?=($order_status == 'pending') ? 'selected' : '' ?>>Đang chờ</option>
        <option value="failed"  <?=($order_status == 'failed') ? 'selected' : '' ?>>Thất bại</option>
        <option value="processing"  >Đang xử lý</option>
        <option value="completed" >Hoàn tất</option>
        <option value="refund"  >Hoàn tiền</option>
        <option value="canceled"  >Hủy</option>
      </select>
    </div>    
    <div class="container">
      <div class="col-sm-6" style="height:75px;">
         <div class='col-md-5' style="margin-right:10px;">
              <div class="form-group">
                  <div class='input-group date' id='datetimepicker8'>
                      <input type='text' name="fromDate" class="form-control" placeholder="Chọn từ ngày" value="<?=isset($fromDate) ? $fromDate : "" ?>" />
                      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
              </div>
          </div>              
          <div class='col-md-5' style="">
              <div class="form-group">
                  <div class='input-group date' id='datetimepicker9'>
                      <input type='text' name="toDate" class="form-control" placeholder="tới ngày" value="<?=isset($toDate) ? $toDate : "" ?>"/>
                      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
              </div>
          </div>
      </div>    
      <script type="text/javascript">
          $(function () {
              $('#datetimepicker8').datetimepicker();
              $('#datetimepicker9').datetimepicker();
              $("#datetimepicker8").on("dp.change",function (e) {
                 $('#datetimepicker9').data("DateTimePicker").setMinDate(e.date);
              });
              $("#datetimepicker9").on("dp.change",function (e) {
                 $('#datetimepicker8').data("DateTimePicker").setMaxDate(e.date);
              });
          });
      </script>
      <button type="submit" class="btn btn-primary">Tìm kiếm</button>
    </div> 
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Số điện thoại</label>    
    <div class="col-sm-3">
      <input type="text" name="phone" class="form-control" id="inputPassword3" placeholder="Nhập số điện thoại khách hàng.." value="<?=isset($phone_number) ? $phone_number : "" ?>">
    </div>
    <div class="col-sm-3">
      <input type="text" name="customer" class="form-control" id="inputPassword3" placeholder="Nhập tên khách hàng.." value="<?=isset($customer_name) ? $customer_name : "" ?>">
    </div>
  </div>  
</form>

<!-- thêm đơn hàng bán lẻ -->
<p>
<a class="btn btn-primary" href="<?=site_url('order/makeOrder') ?>">Tạo đơn hàng bán lẻ</a>
<a href="" class="btn btn-danger">Xuất Excel</a>  
<?//=anchor(site_url('cart'),'Mô phỏng giỏ hàng') ?>
</p>

<div class="table-responsive">
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr class="success" align="center">
        <td>Sản phẩm</td>               
        <td>Khách hàng</td>
        <td>Số điện thoại</td>
        <td>Địa chỉ</td>
        <td>Số lượng</td>                    
        <td>Tình trạng</td>            
        <td>Ngày tạo</td>   
        <td>Thao tác</td>           
      </tr>
    </thead>
    <tbody>      
      <?php 
        $i = 1;     
        foreach ($orders as $row):  
          $status = $row['status'];

          if($status == 'completed')
            $status = '<button type="button" class="btn btn-success">completed</button>';

          $is_pending = $is_failed = $is_processing = $is_completed = $is_refund = $is_canceled = '';

          $is_pending     = ($status == 'pending') ? 'selected' : '';
          $is_failed      = ($status == 'failed') ? 'selected' : '';
          $is_processing  = ($status == 'processing') ? 'selected' : '';
          $is_completed   = ($status == 'completed') ? 'selected' : '';
          $is_refund      = ($status == 'refund') ? 'selected' : '';
          $is_canceled    = ($status == 'canceled') ? 'selected' : '';

          $order_select_box = '';

          if($status != 'completed')
          {
            $order_select_box = '<div id="status-select" class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <select id="select'.$row['order_id'].'" class="form-control" name="status">
                      <option value="">--Tất cả--</option>
                      <option value="pending" '.$is_pending.'>Đang chờ</option>
                      <option value="failed" '.$is_failed.'>Thất bại</option>
                      <option value="processing" '.$is_processing.'>Đang xử lý</option>
                      <option value="completed" '.$is_completed.'>Hoàn tất</option>
                      <option value="refund" '.$is_refund.'>Hoàn tiền</option>
                      <option value="canceled" '.$is_canceled.'>Hủy</option>
                    </select>      
                  </div>
                </div>';
          }

          $product_image = !empty($row['product_image']) ? '<img src="'.base_url('uploads/image/products/'.$row['product_image']).'" class="img-responsive" alt="Responsive image" style="width: 80%">' : '';
          echo '<tr align="center">
              <td style="width:20%"> Code: '.
              	$row['code'].'<br>#'.
              	$row['order_id'].'<br>'.
              	$row['product_title'].'<br>              	
                '.$product_image.'
                </td>              
              <td><div id="customer_updated_'.$row['order_id'].'">'
                .$row['customer_name'].
                '</div><input id="customerajax_'.$row['order_id'].'" name="customer_name" value="'.$row['customer_name'].'" style="display:none;"/>
              </td>
              <td><div id="phone_updated_'.$row['order_id'].'">'
                .$row['customer_phone'].
                '</div><input id="phoneajax_'.$row['order_id'].'" name="customer_phone" value="'.$row['customer_phone'].'" style="display:none;"/>
              </td>
              <td><div id="address_updated_'.$row['order_id'].'">'
                .$row['address'].
                '</div><input id="addajax_'.$row['order_id'].'" name="address" value="'.$row['address'].'" style="display:none;"/>
              </td>
              <td>'
                .$row['quantity'];
                foreach ($row['exportCodes'] as $exportCode) 
                {
                    echo $exportCode['product_size'] . " (Kho ". $exportCode['storage'] . " )<br>";
                }
              echo '</td>
              <td><div id="statusDiv'.$row['order_id'].'">'.$status.'</div></td>
              <td>'.$row['created_at'].'<br>Giá: '.$row['product_price'].'</td>
              <td>
                <div class="form-group">
              	 <a id="'.$row['order_id'].'" href="'.site_url('order/edit/'.$row['order_id']).'" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> Chỉnh sửa</a>                
                 <button type="button" id="updateajax_'.$row['order_id'].'" class="btn btn-link" style="display:none;">Cập nhật đơn hàng</button>
                </div>
                '.$order_select_box.'				        
                <div class="form-group">
                  <button value="'.$row['order_id'].'" class="btn btn-success btnUpdateStatus">Update</button>
                </div>                
              </td>              
              </tr>';               
          $i++;
        endforeach;
      ?>
    </tbody>
  </table>
  <?= !empty($paging_orders) ? "<div class='pull-right'><span>Tổng cộng: $total đơn hàng</span><br>$paging_orders</div>" : "" ?>  
</div>  